<template>
	<div>
		<el-table :data="tableData" border style="width: 100%" class="list">
			<el-table-column prop="id" label="预约id" width="50"></el-table-column>
			<el-table-column prop="item_id" label="房间id" width="50"></el-table-column>
			<el-table-column prop="user_id" label="用户id" width="50"></el-table-column>
			<el-table-column prop="checkin_time" label="入住时间" width="150"></el-table-column>
			<el-table-column prop="checkout_time" label="退房时间" width="150"></el-table-column>
			<el-table-column prop="amount" label="预定房间数量" width="120"></el-table-column>
			<el-table-column prop="price" label="总价" width="70"></el-table-column>
			<el-table-column prop="create_time" label="上传时间" width="150"></el-table-column>
			<el-table-column prop="status" label="状态" width="70"></el-table-column>
			<el-table-column label="操作" width="200">
				<template slot-scope="scope" >
					<el-button size="small" @click="$emit('change',scope.$index)">编辑</el-button>
					<el-button size="small" type="danger" @click="toDel(scope.row)">注销</el-button>
				</template>
			</el-table-column>
		</el-table> 
	</div>
</template>

<script>
	export default {
		name: "RoomList",
		props: ["roomList"],
		computed: {
			tableData: function() {
				let arr = [];
				// console.log(this.roomList, 789)
				this.roomList.forEach((item) => {
					// console.log(item)
					let _item = { ...item
					};
					// console.log(_item.status)
					switch (_item.status) {
						case 1:
							_item.status = "未入住";
							break;
						case 2:
							_item.status = "已入住";
							break;
						case 3:
							_item.status = "已退房";
							break;
						default:
							_item.status = "失效";
							break;
					}

					arr.push(_item);

				});
				return arr;
			}
		},
		methods: {
			handleEdit(index, row) {
				alert(index, row);
			},
			toDel(obj) {
				let isDel = false;
				this.$confirm(`是否取消预约?`, "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
						beforeClose: async (action, instance, done) => {
							if (action === "confirm") {
								instance.confirmButtonLoading = true;
								instance.confirmButtonText = "执行中...";
								console.log(obj.id,123)
								let data = await this._axios.post("/ycw/rooms/deleteAppointmemt", {
									id: obj.id
								});
								instance.confirmButtonLoading = false;
								if (data.data.code) {
									isDel = true;
									done();
								} else {
									
									done();
								}
							} else {
								done();
							}
						}
					})
					.then(() => {
						if (isDel) {
							this.$message({
								type: "success",
								message: "注销成功!"
							});
							this.refresh();
						} else {
							this.$message({
								type: "error",
								message: "注销失败,请确认用户是否已失效!"
							});
						}
						// this.$emit("refresh");
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消注销"
						});
					});
					this.refresh();
			},
			refresh: async function() {
					let data = await this._axios
						.get("/ycw/rooms/getAppointmemtList?page=1&num=10")
						.then(data => data.data.data);
			
					this.roomList = data.data;
					this.page_now = data.page_now;
					this.total = data.page_total * data.page_num;
					this.page_num = data.page_num;
				}
			},
		
	};
</script>

<style lang="scss">
	.list {
		height: 60vh;
		overflow-y: scroll;

		&::before {
			display: none;
		}
	}
</style>
